<template>
  <div class="v-count">
    <div class="box-item">
      <div
        class="number-item"
        v-for="(item, index) in config.data"
        :key="index"
        :style="/\d+/.test(item) ? numberStyle : symbolStyle"
      >
        <ul ref="numberItem" :style="ulStyle" v-if="/\d+/.test(item)">
          <li v-for="(it, i) in config.options" :key="i" :style="liStyle">
            {{ it }}
          </li>
          <li v-for="(it, i) in config.options" :key="i" :style="liStyle">
            {{ it }}
          </li>
        </ul>
        <ul ref="numberItem" :style="ulStyle" v-else>
          <li :style="liStyle">{{ item }}</li>
        </ul>
      </div>
    </div>
    <div class="company" v-show="config.iscompany">
      {{ config.ccontent }}
    </div>
  </div>
</template>

<script>
import CommonMixin from "../mixins/commonMixin";
export default {
  name: "v-count",
  mixins: [CommonMixin],
  methods: {
    init() {
      this.$nextTick(() => {
        this.setNumberTransform();
      });
    },
    update() {
      this.$nextTick(() => {
        this.setNumberTransform();
      });
    },
    resize() {
      this.$nextTick(() => {
        this.setNumberTransform();
      });
    },
    setNumberTransform() {
      let length = this.config.data.length;
      for (let i = 0; i < length; i++) {
        if (/\d+/.test(this.config.data[i])) {
          this.$refs.numberItem[i].style.transition = "none";
          this.$refs.numberItem[i].style.transform = "translate(0, 0)";

          setTimeout(() => {
            let index = this.config.options.indexOf(this.config.data[i]);
            this.$refs.numberItem[i].style.transition =
              "transform 1s ease-in-out";
            this.$refs.numberItem[i].style.transform = `translate(0, -${
              (this.config.options.length + index) *
              parseInt(this.location.height)
            }px)`;
          }, i * 150);
        }
      }
    },
  },
  computed: {
    ulStyle() {
      return {
        height: `${this.config.height * this.config.options.length * 2}px`,
      };
    },
    liStyle() {
      return {
        height: `${this.location.height}px`,
        "line-height": `${this.location.height}px`,
      };
    },

    symbolStyle() {
      let style = {
        background: `${this.config.symbolbgColor} url("${this.config.symbolbgImg}") no-repeat center`,
        width: `${this.config.symbolWidth}px`,
        height: "100%",
        margin: `0 ${this.config.pMargin}px`,
        "font-size": `${this.config.fontSize}px`,
        color: this.config.fontColor,
      };

      return style;
    },
    numberStyle() {
      let style = {
        flex: 1,
        width: `${this.config.pWidth}px`,
        height: "100%",
        margin: `0 ${this.config.pMargin}px`,
        "font-size": `${this.config.fontSize}px`,
        color: this.config.fontColor,
        background: `${this.config.pbgColor} url("${this.config.pbgImg}") no-repeat center`,
      };
      return style;
    },
    companyStyle() {
      return {
        "vertical-align": this.config.companypos,
        "font-size": `${this.config.cfontSize}px`,
        color: this.config.cfontColor,
      };
    },
  },
};
</script>

<style scoped>
.v-count {
  height: 100%;
  width: 100%;
  display: flex;
  color: #fff;
  align-items: flex-end;
}
.box-item {
  flex: 1;
  display: flex;
  height: 100%;
  overflow: hidden;
}
.v-count .company {
}
.v-count .number-item {
  background-size: 100% 100% !important;
}
.v-count .number-item > ul {
  width: 100%;
}
.v-count .number-item > ul > li {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
